/**
 * 布局组件: 根布局，因为它是在app目录的根目录下定义的
 * 根布局是必须的，且不行包含html和body标记
 * 接收一个 children 属性，用于渲染页面内容
 * children 可以是一个页面或其它布局
 */
import ThemeToggle from "./ToggleTheme";
import type { Metadata } from "next";
import { Geist, Geist_Mono, Roboto } from "next/font/google";
// 本地字体
import localFont from "next/font/local";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const roboto = Roboto({
  weight: "400",
  subsets: ["latin"],
});

const myFont = localFont({
  src: "./impact.ttf",
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang='en' className={roboto.className}>
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        <span>hahaha</span>
        <ThemeToggle />
        <main className={myFont.className}> {children} </main>
      </body>
    </html>
  );
}
